<template>
    <div class="task-detial">
          <el-tabs v-model="activeName">
            <el-tab-pane style="height:100%" v-for="(item, i) in tabs" :label="item.label" :name="`${i}`" :key="i">
                <component v-if="activeName === `${i}`" :is="item.component"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import BaseInfo from './BaseInfo'
import ExcuteHistory from './ExcuteHistory'
import TaskBlood from '../../bloodDetail'
export default {
    name: 'TaskDetail',
    data () {
        return {
            scheduleData: JSON.parse(localStorage.getItem('scheduleData')),
            activeName: '0',
            tabs: [
                { label: '基本信息', component: BaseInfo },
                { label: '执行历史', component: ExcuteHistory },
                { label: '任务血缘', component: TaskBlood }
            ]
        }
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    created () {
        if (this.scheduleData.projectId !== +this.projectId) {
            this.$router.push('/taskManage')
        }
        this.setHeaderBack(this.scheduleData.scheduleName)
    },
    methods: {
        ...mapMutations({
            setHeaderBack: 'common/setHeaderBack'
        })
    }
}
</script>

<style lang="less">
    .task-detial {
        height: 100%;
        .el-tabs {
            height: 100%;
            .el-tabs__content {
                height: calc(100% - 40px);
            }
        }
    }
</style>
